<template>
  <div>
    <a-card class="box-card" :style="{ marginTop: '15px' }" :cardOpen="true">
      <div slot="header">
        <span>处置流程</span>
      </div>
      <el-form ref="elForm" size="medium" label-width="100px">
        <el-row class="role-groups">
          <div class="role-group-side">
            <el-tree :data="plan.nodeList" ref="flowNodeList" node-key="nodeId" default-expand-all check-on-click-node highlight-current @node-click="onFlowNodeClick">
              <span class="flow-node" slot-scope="{ node, data }">
                <span class="flow-label">{{ data.nodeName }}</span>
              </span>
            </el-tree>
          </div>
          <div class="role-list">
            <el-form-item label="处置任务" prop="event_name">
              <handle-task-table ref="handleTaskTable" :tasks="nodeTasks" :type="handleInfo.type" :handleId="taskHandleId" @refreshCurrentTasks="queryCurrentNodeTasks" />
            </el-form-item>
            <el-form-item label="流程总结" prop="event_name">
              {{ reportContent }}
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </a-card>
  </div>
</template>

<script>
import * as HandleApi from "@/api/response/handle.js";
import ACard from "@/views/components/a-card/card.vue";
import HandleTaskTable from "./ReportHandleTaskTable.vue";
import { selectDeptTaskByNodeId } from "@/api/response/task";
export default {
  name: "HandleDetailCard",
  components: { ACard, HandleTaskTable },
  dicts: ["sys_dept_type_dict"],
  props: {
    handleId: {
      type: String,
      default: 0,
    },
    plan: {
      type: Object,
      default: () => {
        return {};
      },
    },
    reportContents: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      handleInfo: {},
      levels: [],
      responseLevelOption: [
        {
          label: "Ⅰ级响应",
          value: 1,
        },
        {
          label: "Ⅱ级响应",
          value: 2,
        },
        {
          label: "Ⅲ级响应",
          value: 3,
        },
        {
          label: "Ⅳ级响应",
          value: 4,
        },
      ],
      activeResponse: "1",
      currentLevel: null,
      currentFlow: null,
      drillPlanId: 0,
      nodeTasks: [],
      nodes: [],
      currentNodeId: "",
      reportContent: "",
    };
  },
  computed: {
    canStartFlow() {
      if (this.nodes.length == 0) return false;
      // 在nodes中按sort排序后找到第一个status == 0的
      this.nodes.sort((a, b) => {
        return a.sort - b.sort;
      });
      var firstNode;
      for (let i = 0; i < this.nodes.length; i++) {
        if (this.nodes[i].status == 0) {
          firstNode = this.nodes[i];
          break;
        }
      }
      return firstNode.nodeId == this.currentNodeId;
    },
    taskHandleId() {
      // if (this.handleInfo.type == 2) {
      //   return this.handleId;
      // } else {
      //   return this.currentFlow.handleId;
      // }
      return 0;
    },
  },
  mounted() {
    // 预案数据更新后默认初始化第一个处置流程
    this.$refs.flowNodeList.setCurrentKey(this.plan.nodeList[0].nodeId);
    this.onFlowNodeClick(this.plan.nodeList[0]);
    this.getNodeProgress();
  },
  methods: {
    getNodeProgress() {
      HandleApi.getHandleProgress(this.handleId).then(res => {
        this.nodes = res.data;
      });
    },
    onFlowNodeClick(val) {
      this.currentNodeId = val.nodeId;
      // 根据节点ID获取任务列表
      this.queryCurrentNodeTasks();
      let report = this.reportContents.find(v => v.nodeId == val.nodeId);
      this.reportContent = report.content;
    },
    queryCurrentNodeTasks() {
      selectDeptTaskByNodeId({
        handleId: this.handleId,
        nodeId: this.currentNodeId,
      }).then(res => {
        this.nodeTasks = res.data;
      });
    },
    onFlowReportSave() {
      // 实时保存
      this.$emit("onFlowReportSave", this.reportContent, this.currentNodeId);
    },
  },
  watch: {
    plan: () => {},
    reportContents: (newVal, oldVal) => {
      console.log("reportContents", newVal, oldVal);
    },
  },
};
</script>

<style lang="scss" scoped>
.role-groups {
  display: flex;

  .role-group-side {
    min-width: 200px;
  }

  .role-list {
    flex: 1;
    margin-left: 15px;
    box-sizing: content-box;
    overflow: hidden;
  }
}

::v-deep {
  .el-tree-node__content {
    display: flex;

    .flow-node {
      flex: 1;
      display: flex;

      .flow-label {
        flex: 1;
        line-height: 28px;
      }

      .flow-btns {
        margin-right: 10px;
      }
    }
  }

  .el-button.tab-edit-btn {
    color: #13ce66;
    margin-left: 10px;
    font-size: 12px;
  }
}

.feed-container {
  background: #0b133c;
  color: white;
  border-radius: 10px;
  padding: 15px;

  .feed-list {
    overflow-y: scroll;
    max-height: 300px;

    // 设置滚动条宽度
    &::-webkit-scrollbar {
      width: 8px !important;
      height: 8px !important;
      background: rgba(10, 122, 227, 0.01);
    }

    //滚动条的哈滑块
    &::-webkit-scrollbar-thumb {
      background: #2e6190;
      border-radius: 3px;
    }

    .feed-item {
      font-size: 12px;
      line-height: 25px;
    }
  }
}

ul,
li {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

.drill-btns {
  text-align: center;
  margin-top: 20px;
}
</style>
